<template>
   <div class="container" >
    <div>
        回传消息：{{ backMsg }}
    </div>
    <TableTr :in-msg="'老大'" @ch="changeOn"></TableTr>
    <component :is="'TableTr'" :in-msg="'老二'" @ch="changeOn"></component>
    <TableTr v-bind:in-msg="'老三'" @ch="changeOn"></TableTr>
   </div>
</template>
<script>
import TableTr from './components/TableTr.vue';
   export default {
    name: '',
    components: {
        TableTr
   },
    data: function () {
        return {
            backMsg:""
        };
    },
    methods: {
        changeOn(data){
            console.info(data);
            this.backMsg = data;
        }
    },
}
</script>
<style>
  html,
  body, 
  #app{
    height: 100%;
  }
</style>
<style scoped>
   .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background-color: aliceblue;
   }
   .tr{
      width: 200px;
      flex-basis: 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: beige;
      align-items: center;
    }
   .second{
      background-color: aqua;
   }
</style>